<template>
  <div>
    <h1 v-red>App</h1>
    <h2 v-color="'pink'">App</h2>
    <h3>App</h3>
    <h4>App</h4>
    <h5 v-red>App</h5>
    <h6>App</h6>
    <h5 v-color="'yellow'">App</h5>
    <h6>App</h6>
    <Item />
  </div>
</template>

<script>
import Item from "./components/Item";
export default {
  name: "App",
  components: {
    Item,
  },
  data() {
    return {};
  },
  /* 使用directives配置项局部注册自定义指令 */
  directives: {
    red(el) {
      el.style.background = "red";
    },
    color(el, binding) {
      el.style.background = binding.value;
    },
  },
};
</script>

<style scoped></style>
